<style scoped lang="less">
/deep/.el-form-item__label {
  padding: 0 !important;
  margin-right: 5px;
}
</style>
<template>
  <div class="alarm-blk">
    <div class="opers flex v-c mb-20">
      <el-form :inline="true" class="filter-blk flex-1">
        <div class="fl-bw">
          <el-form-item label="设备状态">
            <el-select
              v-model="filterForm.currentstate"
              clearable
              placeholder="请选择"
            >
              <el-option label="正常" value="1"></el-option>
              <el-option label="报警" value="2"></el-option>
              <el-option label="离线" value="3"></el-option>
              <el-option label="故障" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单位名称">
            <el-input
              placeholder="请输入"
              v-model.trim="filterForm.businessName"
            ></el-input>
          </el-form-item>
          <el-form-item label="设备编号">
            <el-input
              placeholder="请输入"
              v-model.trim="filterForm.number"
            ></el-input>
          </el-form-item>
          <el-form-item label="设备位置">
            <el-input
              placeholder="请输入"
              v-model.trim="filterForm.position"
            ></el-input>
          </el-form-item>
          <el-form-item label="排序">
            <el-select v-model="filterForm.orderBy" clearable>
              <el-option label="安装时间" value="1"></el-option>
              <el-option label="更新时间" value="2"></el-option>
            </el-select>
          </el-form-item>
          <div>
            <el-form-item>
              <el-button type="primary" @click="searchAction"
                ><i class="iconfont icon-search"></i> 查询</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="exportAction">导出</el-button>
            </el-form-item>
            <el-form-item v-if="isChildren == 1">
              <el-button type="primary" @click="goBack">返回 </el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>

    <el-row class="device-list" :gutter="18">
      <el-col :span="6" v-for="(item, index) in dataList" :key="index">
        <DeviceItem
          :scale="scale"
          :data="item"
          @update="updateAction"
        ></DeviceItem>
      </el-col>
    </el-row>
    <p v-if="dataList.length == 0" class="data-none mt-30">暂无数据</p>
    <el-pagination
      v-if="total > 0"
      class="text-right mt-20"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="prev, pager, next, total, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import { mapState } from "vuex";
import DeviceItem from "@/components/census/unitIOT/UnitDeviceItem.vue";
export default {
  provide() {
    return {
      updateAction: this.updateAction,
    };
  },
  name: "alarmList",
  props: {
    type: {
      //物联网类型
      type: String,
      default: "fireControl",
    },

    state: {
      //设备状态
      type: String,
      default: "",
    },
    scale: {
      type: Number,
      default: 1,
    },
  },
  components: {
    DeviceItem,
  },
  watch: {},
  data() {
    return {
      filterForm: {
        currentstate: "",
        orderBy: "1",
      },
      dataList: [],
      total: 0,
      currentPage: 1,
      pageSize: 8,
      loading: false,
      alarmType: [
        {
          name: "所有类型",
          id: "",
        },
      ],
      isChildren: 2,
    };
  },
  computed: {
    ...mapState(["siteInfos"]),
  },
  methods: {
    getData(page, obj) {
      let url = "";
      let params = Object.assign(
        {
          page: page,
          limit: this.pageSize,
          deviceClassify:
            this.type == "fireControl" || this.type == "warehouse"
              ? ""
              : this.config.typeMap[this.type],
          isChildren: obj ? obj.isChildren : this.isChildren,
          ...(obj && { transDeviceCode: obj.transDeviceCode }),
        },
        this.filterForm
      );
      this.openFullLoading();
      this.$get("/fireFightingIOT/device/deviceListPage", params).then(
        (res) => {
          this.closeFullLoading();
          let data = res.data;
          this.currentPage = page;
          this.total = data.totalSize;
          this.dataList = data.Items;
        },
        (err) => {
          this.closeFullLoading();
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    handleCurrentChange(page) {
      this.getData(page);
    },
    searchAction() {
      this.getData(1);
    },
    handleCurrentChange(page) {
      this.getData(page);
    },
    updateAction(obj) {
      this.isChildren = obj.isChildren;
      this.getData(this.currentPage, obj);
    },
    exportAction() {
      let businessName = this.filterForm.businessName;
      let deviceClassify =
        this.type == "fireControl" ? "" : this.config.typeMap[this.type];
      let position = this.filterForm.position ? this.filterForm.position : "";
      let number = this.filterForm.number ? this.filterForm.number : "";
      let url = `${
        this.config.baseApi
      }/uploadFile/getDeviceTemplte?accountname=${
        this.siteInfos.accountname
      }&businessName=${
        businessName || ""
      }&deviceClassify=${deviceClassify}&position=${position}&number=${number}&isChildren=${
        this.isChildren
      }`;
      if (deviceClassify == 1 || deviceClassify == 2 || deviceClassify == 3) {
        this.$get("/uploadFile/getDeviceExport", {
          accountname: this.siteInfos.accountname,
          businessName,
          deviceClassify,
          position,
          number,
        }).then((res) => {
          // window.open(res.data.filePath);
          window.location.href = res.data.filePath;
        });
        return;
      }
      window.open(url);
    },
    goBack() {
      this.isChildren = 2;
      this.getData(1);
    },
  },
  created() {
    this.filterForm.currentstate = this.state;
    if (this.state == 0) {
      delete this.filterForm.currentstate;
    }

    this.openFullLoading();
    this.getData(1);
  },
};
</script>
